<template>
    <div id="box">
      <div class="box" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
          <ul class="list" >
            <li v-for="(i,index) in list" class="list-item" :key="index">{{ i.noticeTitle }}</li>
          </ul>
          <p v-if="loading" style="margin-top:10px;" class="loading">
            <span></span>
          </p>
          <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        count: 0,//起始页数值为0
        loading: false,
        totalPages: "",//取后端返回内容的总页数
        list: [] //后端返回的数组
      };
    },
    computed: {
      noMore() {
        //当起始页数大于总页数时停止加载
        return this.count >= this.totalPages - 1;
      },
      disabled() {
        return this.loading || this.noMore;
      }
    },
    created() {
      this.getMessage();
    },
    methods: {
      load() {
        //滑到底部时进行加载
        this.loading = true;
        setTimeout(() => {
          this.count += 1; //页数+1
          this.getMessage(); //调用接口，此时页数+1，查询下一页数据
        }, 2000);
      },
      getMessage() {
        setTimeout(()=>{
            this.list = [
                {
                    noticeTitle:"阿囧1", 
                },
                {
                    noticeTitle:"阿囧2", 
                },
                {
                    noticeTitle:"阿囧3", 
                },
                {
                    noticeTitle:"阿囧4", 
                },
                {
                    noticeTitle:"阿囧5", 
                },
                {
                    noticeTitle:"阿囧6", 
                },
                {
                    noticeTitle:"阿囧7", 
                },
                {
                    noticeTitle:"阿囧8", 
                },
                {
                    noticeTitle:"阿囧9", 
                },
                {
                    noticeTitle:"阿囧10", 
                },
                {
                    noticeTitle:"阿囧11", 
                },
                {
                    noticeTitle:"阿囧12", 
                },
                {
                    noticeTitle:"阿囧13", 
                },
                {
                    noticeTitle:"阿囧14", 
                },
                {
                    noticeTitle:"阿囧15", 
                },
                {
                    noticeTitle:"阿囧16", 
                },
                {
                    noticeTitle:"阿囧17", 
                },
                {
                    noticeTitle:"阿囧18", 
                },
                {
                    noticeTitle:"阿囧19", 
                },
                {
                    noticeTitle:"阿囧20", 
                },
                {
                    noticeTitle:"阿囧21", 
                },
                {
                    noticeTitle:"阿囧22", 
                },
                {
                    noticeTitle:"阿囧23", 
                },
                {
                    noticeTitle:"阿囧24", 
                },
                {
                    noticeTitle:"阿囧25", 
                },
                {
                    noticeTitle:"阿囧26", 
                },
                {
                    noticeTitle:"阿囧27", 
                },
                {
                    noticeTitle:"阿囧28", 
                },
                {
                    noticeTitle:"阿囧29", 
                },
                {
                    noticeTitle:"阿囧30", 
                },
                {
                    noticeTitle:"阿囧31", 
                },
                {
                    noticeTitle:"阿囧32", 
                },
                {
                    noticeTitle:"阿囧33", 
                },
                {
                    noticeTitle:"阿囧34", 
                },
                {
                    noticeTitle:"阿囧35", 
                },
                {
                    noticeTitle:"阿囧36", 
                },
                {
                    noticeTitle:"阿囧37", 
                },
                {
                    noticeTitle:"阿囧38", 
                },
                {
                    noticeTitle:"阿囧39", 
                },
                {
                    noticeTitle:"阿囧40", 
                },
                {
                    noticeTitle:"阿囧41", 
                },
                {
                    noticeTitle:"阿囧42", 
                },
            ];
            this.loading = false;
        },500)
      }
    }
  };
  </script>
  
  <style scoped>
  #box{
      width: 100%;
    height: 100%;
    position: absolute;
    overflow-y: auto;
  }
  .box {
    width: 100%;
     margin:  0 auto;
  }
  .list {
    padding: 0;
    font-size: 14px;
  }
  .list-item {
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    list-style: none;
    padding: 0 1rem;
    box-sizing: border-box;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #e7e7e7;
  }
  .loading span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #409eff;
    border-left: transparent;
    animation: zhuan 0.5s linear infinite;
    border-radius: 50%;
  }
  @keyframes zhuan {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  </style>
  